<script setup lang="ts">
  import { useDark, useWindowSize, useThrottleFn } from '@vueuse/core'
  import zhCn from "element-plus/es/locale/lang/zh-cn";
  import useAppStore from './stores/modules/app'
  import useSettingStore from './stores/modules/setting'
  import { ScreenEnum } from './enums/appEnums'
  const appStore = useAppStore()
  const settingStore = useSettingStore()
  const elConfig = {
    zIndex: 3000,
    locale: zhCn
  }
  const isDark = useDark()
  onMounted(async () => {
    //设置主题色
    settingStore.setTheme(isDark.value)
  })

  const { width } = useWindowSize()
  watch(
    width,
    useThrottleFn((value) => {
      if (value > ScreenEnum.SM) {
        appStore.setMobile(false)
        appStore.toggleCollapsed(false)
      } else {
        appStore.setMobile(true)
        appStore.toggleCollapsed(true)
      }
      if (value < ScreenEnum.MD) {
        appStore.toggleCollapsed(true)
      }
    }),
    {
      immediate: true
    }
  )
</script>

<template>
  <el-config-provider :locale="elConfig.locale" :z-index="elConfig.zIndex">
    <router-view />
  </el-config-provider>
</template>

<style>
  .hebItem .inner{position: relative; z-index: 60}
  .logo-text{padding:0 !important; width: 100%; height: 100%;}
  .logo-text img{max-width: 100%; max-height: 100%;}
  .logo-zwname{position: absolute; left: 0; top:0; z-index:90; padding:4px; color:#000; line-height: 1;}
  .el-table .highlight-row {
    background-color: var(--el-color-primary-light-9) !important; /* 自定义高亮颜色 */
  }
  .line-hide-2,.line-hide-3,.line-hide-4,.line-hide-5{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .line-hide-2 {-webkit-line-clamp: 2;}
  .line-hide-3 {-webkit-line-clamp: 3;}
  .line-hide-4 {-webkit-line-clamp: 4;}
  .line-hide-5 {-webkit-line-clamp: 5; }
  .line-hide-1 {
    white-space: nowrap; /* 不换行 */
    overflow: hidden; /* 超出部分隐藏 */
    text-overflow: ellipsis; /* 显示省略号 */
  }
  .text-error {
  color: #ff3d00  !important;
}
.statusValue.cursor-pointer:hover{color:red}
  /* 警告语 */
  .notice_content{
    display:inline;
    p{font-size: 13px !important; display:inline}
    image{display: none;}
  }
  pre{
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    white-space: pre-wrap;
  }
  .tips-box {
    background-color: #FDF6EC;
    padding: 20px;
    color: #E6A23C;
  }
  
  
  .top-form-item{width: 16%; min-width: 220px; max-width: 280px; margin-right: 20px !important;}
  .top-form-item-time{width: 20%; min-width: 260px; max-width: 300px; margin-right: 20px !important;}
  .zxb-cascader-right {
    inset: 120px 204px auto auto !important;
  }

  .zxb-cascader-right .el-cascader-panel {
    width: 360px !important
  }

  .text-pre {
    font-family: PingFang SC, Arial, Hiragino Sans GB, Microsoft YaHei, sans-serif !important;
    text-wrap: wrap;
    width: 100%;
    line-height: 1.6;
  }


  .hebItem {
    position: absolute;
  }

  .hebItem,
  .zwEditBoxInfo {
    display: flex;
    align-items: center;
    justify-content: center;

    .con-zhezhao {
      position: absolute;
      width: 100%;
      height: 100%;
      z-index: 98;
      left: 0;
      top: 0
    }

    &.on {
      .clip-black {
        background-color: var(--el-color-primary);
      }
    }

    .editPoint {
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      display: block;
      cursor: pointer;
    }

    .clip {
      width: 100%;
      height: 100%;
      left: 0px;
      top: 0px;
      background-color: rgb(174, 233, 251);
      z-index: 2;
      position: absolute;
    }

    .clip-black {
      background-color: #000;
      position: absolute;
      z-index: 1
    }

    .clip-left {
      left: 0;
      top: 0;
    }

    .clip-right {
      right: 0;
      bottom: 0;
    }

    

    .zwnum {
      font-size: 18px;
      font-weight: bold;
      line-height: 1;
    }

    .zsnum {
      font-size: 14px;
      width: 100%;
    }

    .area {
      position: absolute;
      width: 100%;
      left: 0;
      padding: 0 8px;
      box-sizing: border-box;
      font-size: 12px;
      bottom: 5px;
    }

    .polygonData-text {
      color: #333;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 0 10px 20px;
      transform-origin: 0 0;
      z-index: 90;
      cursor: pointer;
      position: absolute;
    }
    
  }
  .zwname {
    font-size: 14px;
    font-weight: bold;
    margin: 2px 0;
    display: block; line-height: 1.2;
  }
  .text-size0{padding: 0 4px 10px;}
  .text-size0 .zwname {
    font-size: 12px;
    line-height: 1.2;
    width: 140%;
    transform: scale(0.75) translateX(-20%);
  }
  .text-size0  .area { font-size: 12px; bottom: 4px; left: 0px;}
    
  .text-size0 .area span {transform: scale(0.8);}
  .text-size0 .area span:nth-child(1) {
    transform-origin: 0 center;
  }
  .text-size0 .area span:nth-child(2) {
    transform-origin: right center;
  }
    
  .text-size1 .zwnum{font-size: 22px !important;}
  .text-size1 .area { font-size: 14px !important;}
  
  .text-size2 {padding-bottom: 10px !important;}
  .text-size2 .zwnum { font-size: 30px !important;}
  .text-size2 .zwname { font-size: 16px !important; }
  .text-size2 .zsnum {font-size: 16px !important; bottom: 10px !important;}
  .text-size2 .area {font-size: 16px !important; }
  
  
  .text-size3 .zwnum {font-size: 40px !important;}
  .text-size3 .zwname {font-size: 30px !important;}
  .text-size3 .area {font-size: 30px !important;}
  
  .text-size-w1 .zwnum{font-size: 20px !important;}
  .text-size-w1 .zwname{font-size: 18px !important;}
  .text-size-w1 .area{font-size: 18px !important;}
  
  .text-size-w2{padding-bottom: 40px !important;}
  .text-size-w2 .zwnum{font-size: 34px !important;}
  .text-size-w2 .zwname{font-size: 28px !important;}
  .text-size-w2 .area{font-size: 24px !important;}

  .text-size-w3{padding-bottom: 60px !important;}
  .text-size-w3 .zwnum{font-size: 46px !important;}
  .text-size-w3 .zwname{font-size: 34px !important;}
  .text-size-w3 .area{font-size: 30px !important;}


  .text-size-w4{padding-bottom: 100px !important;}
  .text-size-w4 .zwnum{font-size: 70px !important;}
  .text-size-w4 .zwname{font-size: 45px !important;}
  .text-size-w4 .area{font-size: 45px !important;}
  
  
  .text-size-w11{padding-bottom: 20px !important;}
  .text-size-w11 .zwnum{font-size: 22px !important;}
  .text-size-w11 .zwname{font-size: 18px !important;}
  .text-size-w11 .area{font-size: 18px !important;}

  .text-size-w21{padding-bottom: 30px !important;}
  .text-size-w21 .zwnum{font-size: 34px !important;}
  .text-size-w21 .zwname{font-size: 28px !important;}
  .text-size-w21 .area{font-size: 20px !important;}

  .text-size-w31{padding-bottom: 40px !important;}
  .text-size-w31 .zwnum{font-size: 46px !important;}
  .text-size-w31 .zwname{font-size: 34px !important;}
  .text-size-w31 .area{font-size: 22px !important;}



  .text-size-w41{padding-bottom: 70px !important;}
  .text-size-w41 .zwnum{font-size: 50px !important;}
  .text-size-w41 .zwname{font-size: 38px !important;}
  .text-size-w41 .area{font-size: 26px !important;}
  
  
  
  .text-size-h1{padding-bottom: 10px !important;}
  .text-size-h1 .zwnum{font-size: 18px !important;}
  .text-size-h1 .zwname{font-size: 15px !important;}
  .text-size-h1 .area{font-size: 15px !important;}

  .text-size-h2{padding-bottom: 20px !important;}
  .text-size-h2 .zwnum{font-size: 20px !important;}
  .text-size-h2 .zwname{font-size: 15px !important;}
  .text-size-h2 .area{font-size: 12px !important;}

  .text-size-h3{padding-bottom: 20px !important;}
  .text-size-h3 .zwnum{font-size: 20px !important;}
  .text-size-h3 .zwname{font-size: 18px !important;}
  .text-size-h3 .area{font-size: 14px !important;}

  
  .el-select{ width: 100%}
  
  #edui_fixedlayer{z-index:99999 !important}
  
  
  
  
  
  
 .zb-side-icon{
   .el-menu:not(.el-menu--collapse){ width: 100%; }
   .logo{
     width:80px;
     .el-image{margin: 0 auto;}
   }
 }
 .zb-side-icon .el-scrollbar__view>.el-menu{
   &>.el-sub-menu{
     padding-left:0 !important;
     &>.el-sub-menu__title .el-sub-menu__icon-arrow{display:none}
   }
   .el-menu-item{padding-left:0}
   .zb-sub-menu .el-menu-item span,.zb-sub-menu .el-sub-menu__title{padding-left: calc(10px + var(--el-menu-level)* 8px) !important;}
   .zb-nav-title{display: block; text-align: center; line-height: 1.6;}
   .zxb-showLeve2-title{font-size:18px; font-weight:bold; color: var(--el-color-primary); margin:22px 0 31px; line-height:1}
   .zb-nav-menu-item{
     display: block; text-align: center; width: 68px; line-height: 18px; height: 68px; padding: 10px 0 !important; margin: 0 6px 5px; border-radius: 10px; border: none;
     .menu-item-icon{
       display: block; margin: 0 auto; font-size:26px !important; width:26px; height:26px;
       svg{width:100% !important; height:100% !important;}
     }
   }
   .el-sub-menu{
     &>.el-sub-menu__title{
       padding:0; height: auto;
       &:hover{background-color:transparent}
       .zb-nav-menu-item .el-sub-menu__icon-arrow{display:none}
     }
     .zb-sub-menu{
       position: fixed; left: 81px; top:0px; background-color: var(--side-dark-color, var(--el-bg-color)); width: 220px; height: 100vh; border-right:1px solid var(--el-border-color, var(--el-border-color-light)); border-left:1px solid var(--el-border-color, var(--el-border-color-light)); transition:all ease 0s; opacity:0; display:none; padding:0 8px;
       .el-menu-item{border:none; border-radius:6px; margin-bottom:4px;}
       .menu-item-icon{display:none}
     }
   }
   
   
   // 选中&悬浮样式
   
   .is-active.zb-nav-menu-item, .el-sub-menu.is-active .zb-nav-menu-item, .el-sub-menu.is-opened .zb-nav-menu-item, .el-sub-menu:hover .zb-nav-menu-item{
     border-right-width: 2px;
     border-color: var(--el-color-primary) !important;
     background-color: var(--el-color-primary-light-9) !important;
     color: var(--el-color-primary) !important
   }
   &>.el-sub-menu.is-active{
     .zb-nav-menu-item{color: var(--el-color-primary); background-color: var(--el-color-primary-light-9) !important;}
   }
   &>.el-sub-menu:hover{
     .zb-sub-menu,&>.el-menu{z-index:90 !important;}
     .zb-nav-menu-item{color: var(--el-color-primary); background-color: var(--el-color-primary-light-9) !important;}
   }
   
   
 }
 .zb-side-icon.hover  .el-scrollbar__view>.el-menu{
   &>.el-sub-menu:hover{
     .zb-sub-menu,&>.el-menu{opacity:1; display:block !important;}
   }
 }
 .zb-side-icon.show  .el-scrollbar__view>.el-menu{
   &>.el-sub-menu.is-active,&>.el-sub-menu.is-opened,&>.el-sub-menu:hover{
     .zb-sub-menu,&>.el-menu{opacity:1; display:block !important;}
   }
 }
 
 .zb-side-text  .el-scrollbar__view>.el-menu{
   .zb-nav-menu-item{display: flex; align-items: center;}
   .small.badge{right: -12px; top:8px}
 }
 
 // 侧边栏暗黑模式
 .zb-side-dark .el-scrollbar__view>.el-menu{
   .el-sub-menu .zb-sub-menu{
     border-right:1px solid #414243; border-left:1px solid #414243;
   }
 }
 
 
 
 
 
 /********************   相关按钮时常出现黑色边框的解决方法-start   ****************************/
 .el-tabs__item:focus,.el-tooltip__trigger:focus-visible{
   outline: unset !important;
 }
 /********************   相关按钮时常出现黑色边框的解决方法--end   ****************************/
</style>